<template>
  <div class="hm-collect">
    <HmHeader>
      <template>
        <div class="title">我的点赞</div>
      </template>
    </HmHeader>
    <div class="collectList">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="item"
            v-for="item in list"
            :key="item.id"
            @click="getDetail(item.id)"
          >
            <div class="top">
              <!-- <div class="left">1</div> -->
              <img :src="item.avatar" alt="" />
              <div class="right">
                <div class="title">{{ item.stem }}</div>
                <div class="username">
                  <span>{{ item.creator }}</span>
                  <span> | </span>
                  <span>{{ item.createdAt }}</span>
                </div>
              </div>
            </div>
            <div class="middle" v-html="item.content"></div>
            <div class="bottom">
              <span>点赞 {{ item.likeCount }}</span>
              <span>|</span>
              <span>浏览 {{ item.views }}</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
//导入HmHeader组件
import HmHeader from "@/components/HmHeader.vue";
// 导入UserRequest
import { UserRequest } from "@/api/user";

export default {
  components: { HmHeader },
  data() {
    return {
      list: [],
      refreshing: false,
      loading: false,
      finished: false,
    };
  },
  methods: {
    //获取收藏/点赞列表
    async getCollectAndLikeList() {
      const res = await UserRequest.getCollectAndLikeList(
        localStorage.getItem("token"),
        1
      );
      console.log(res);
      this.list = res.data.data.rows;
    },
    //刷新事件
    onRefresh() {
      console.log("刷新了");
      //两秒后刷新完成
      setTimeout(() => {
        this.refreshing = false;
      }, 2000);
    },
    //下拉加载事件
    onLoad() {
      console.log("加载了");
      this.getCollectAndLikeList();
      this.loading = false;
      this.finished = true;
    },
  },
  created() {
    this.getCollectAndLikeList();
  },
};
</script>

<style scoped lang="less">
.item {
  border: (1 / @vw) solid #000;
  padding: (10 / @vw);
  margin: (10 / @vw);
  .top {
    display: flex;

    img {
      width: (50 / @vw);
      height: (50 / @vw);
      border-radius: 50%;
    }

    .right {
      margin-left: (10 / @vw);
      flex: 1;
    }
  }
}
// 超过两行显示省略号
.middle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
